<template>
	<view class="home">
		<!-- //顶部导航栏 -->
		<view class="head-nav">
			<image src="/static/images/icons/search.png" mode="widthFix"></image>
			<image src="/static/images/icons/cart.png" mode="widthFix" @click="goCart"></image>
		</view>
		<!-- 轮播 -->
		<view class="section-banner">
			<swiper class="swiper-banner" autoplay="true" circular="true" indicator-dots="true" interval="2000" duration="500">
				<swiper-item v-for="item in navList" :key="item.id">
					<image :src="item.pic" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播下四个分类 -->
		<view class="section-kinds">
			<view class="kind-block" v-for="item in categoryList" :key="item.id" @click="goProduct(item.id)">
				<image :src="item.icon"></image>
				<view class="kind-text">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 限时活动小喇叭纵向轮播 -->
		<view class="section-notify">
			<image src="/static/images/icons/xshd.png" mode="" class="icon-notify"></image>
			<view class="text">限时活动：</view>
			<!-- 纵向轮播 -->
			<swiper class="swiper-notify" autoplay="true" interval="2000" duration="800" vertical="true" circular="true">
				<swiper-item v-for="item in activityList" :key="item.id" @click=goInfo(item.id)>
					<view class="nav-item">
						<view class="product-name">{{item.name}}</view>
						<view class="product-price">
							<view class="text">{{item.price}}元</view>
							<view class="text">现价99元</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 热门推荐 -->
		<view class="section-series">
			<view class="common-title">
				<view class="title">热门推荐</view>
			</view>
			<!-- 轮播 -->
			<view class="container">
				<swiper class="swiper-hot" autoplay="true" interval="2000" duration="1100" circular="true" display-multiple-items="3">
					<swiper-item v-for="item in hotGoodsList" :key="item.id" class="hot-item">
						<image :src="item.pic" mode=""></image>
						<view class="name">{{item.name}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 新品推荐 -->
		<view class="section-series">
			<view class="common-title">
				<view class="title">新品推荐</view>
			</view>
			<view class="newProduct">
				<view class="new-container">
					<view class="new-item" v-for="item in newGoodsList" :key="item.id" @click="goInfo(item.id)">
						<image :src="item.pic" mode=""></image>
						<view class="newProductBox">
							<view class="cname">{{item.name}}</view>
							<view class="price">价格：{{item.price}}元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="section-like">
			<view class="common-title">
				<view class="title">猜你喜欢</view>
			</view>
			<view class="product-list">
				<view class="product-item" v-for="item in likeGoodsList" :key="item.id" @click="goInfo(item.id)">
					<image :src="item.pic" mode=""></image>
					<view class="text-area">
						<view class="like-name">{{item.brandName}}</view>
						<view class="price">¥{{item.price}}元</view>
						<view class="origin">{{item.productCategoryName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerAds,
		findCategory,
		recommendList,
		saleMostProducts,
		lejuLatestProducts,
		latestProducts
	} from "@/api/home/home.js"
	export default {
		data() {
			return {
				//轮播数据
				navList: [],
				//分类列表
				categoryList: [],
				//限时活动列表，数据有些不准
				activityList: [],
				//热门推荐，数据不准
				hotGoodsList: [],
				//新品推荐
				newGoodsList: [],
				//猜你喜欢
				likeGoodsList: []
			};
		},
		methods: {
			//初始化获取页面数据
			init() {
				//轮播
				bannerAds().then(res => {
					// console.log(res);
					this.navList = res.data.items;
				})
				//分类
				findCategory('1308336521604599809').then(res => {
					// console.log(res);
					this.categoryList = res.data.category.children;
				})
				//限时活动，数据有些不准
				recommendList().then(res => {
					// console.log(res);
					this.activityList = res.data.items;
					console.log(this.activityList)
				})
				//热门推荐，数据不准
				saleMostProducts().then(res => {
					// console.log(res)
					this.hotGoodsList = res.data.items;
				})
				//新品推荐
				lejuLatestProducts().then(res => {
					// console.log(res)
					this.newGoodsList = res.data.productList;
				})
				//猜你喜欢
				latestProducts(1, 16).then(res => {
					// console.log(res)
					this.likeGoodsList = res.data.rows;
				})
			},
			// 跳转到商品详情
			goInfo(id) {
				uni.navigateTo({
					url: `/pages/home/info/info?id=${id}`
				})
			},
			// 跳转到商品列表
			goProduct(id) {
				uni.navigateTo({
					url: `/pages/kind/product/product?kindId=${id}`,
				});
			},
			// 右上角图标跳转到购物车页面
			goCart() {
				uni.navigateTo({
					url: '../my/cart/cart',
				});
			}
		},
		onLoad() {
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1ece7;
	}

	.home {
		padding-top: var(--status-bar-height);

		//顶部导航栏
		.head-nav {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			border-bottom: none;

			// 导航栏图标
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}

		//轮播
		.section-banner {
			width: 100%;
			height: 470rpx;

			.swiper-banner {
				width: 100%;
				height: 470rpx;

				image {
					width: 100%;
					border-radius: 20rpx;
				}
			}
		}

		//<!-- 轮播下四个分类 -->
		.section-kinds {
			width: 100%;
			margin: 60rpx auto;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.kind-block {
				width: 120rpx;
				text-align: center;

				image {
					// display: block;
					height: 80rpx;
					width: 80rpx;
					margin: 0 auto;
				}
			}
		}

		//限时活动
		.section-notify {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 670rpx;
			height: 96rpx;
			margin: 40rpx auto;
			background-color: #fff;
			font-size: 28rpx;
			color: #3e3e3e;
			line-height: 96rpx;
			text-indent: .5em;

			//喇叭图标
			.icon-notify {
				width: 48rpx;
				height: 48rpx;
				margin-left: 30rpx;
			}

			//限时活动文字
			.text {
				font-weight: 600;
				color: orange;
			}

			//纵向轮播
			.swiper-notify {
				height: 96rpx;
				flex: 1;

				.nav-item {
					display: flex;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: flex-start;

					.product-name {
						width: 250rpx;
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.product-price {
						display: block;

						.text {
							font-size: 24rpx;
							line-height: 30rpx;

							&:nth-child(1) {
								color: #333;
								text-decoration: line-through;
							}

							&:nth-child(2) {
								color: red;
							}
						}
					}
				}
			}
		}

		//热门推荐
		.section-series {
			width: 100%;

			.common-title {
				font-size: 32rpx;
				color: #3e3e3e;
				line-height: 44rpx;
				margin: 40rpx auto;
				box-sizing: border-box;
				padding: 0 40rpx;

				.title {
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #3e3e3e;
					letter-spacing: 2rpx;
					font-weight: 600;
				}
			}

			//轮播
			.container {
				display: flex;
				align-items: center;
				overflow: hidden;

				.swiper-hot {
					display: flex;
					align-items: center;
					width: 100%;
					height: 300rpx;

					.hot-item {
						margin: 0 20rpx;

						image {
							width: 208rpx;
							height: 176rpx;
							display: inline-block;
						}

						.name {
							font-size: 26rpx;
							line-height: 38rpx;
							color: #3e3e3e;
							text-align: center;
							margin-top: 20rpx;
							font-weight: 600;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}
		}

		//新品推荐
		.newProduct {
			white-space: nowrap; //不换行
			overflow: auto;

			.new-container {
				width: 100%;

				.new-item {
					width: 590rpx;
					display: inline-block;
					margin: 0 20rpx;
					position: relative;

					image {
						position: absolute;
						left: 44rpx;
						top: 0;
						bottom: 0;
						width: 194rpx;
						height: 168rpx;
						border-radius: 10rpx;
						margin: auto;
					}

					.newProductBox {
						padding-left: 270rpx;
						padding-top: 50rpx;
						padding-bottom: 50rpx;
						height: 160rpx;
						background: #fff;
						box-shadow: 0 16rpx 48rpx 0 rgba(122, 98, 75, .12);
						border-radius: 20rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						flex-direction: column;

						.cname {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #3e3e3e;
							letter-spacing: 1rpx;
							width: 100%;
						}

						.price {
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #3e3e3e;
							letter-spacing: 1rpx;
							width: 100%;
						}
					}
				}
			}
		}

		//猜你喜欢
		.section-like {
			margin-bottom: 60px;

			.common-title {
				font-size: 32rpx;
				color: #3e3e3e;
				line-height: 44rpx;
				margin: 40rpx auto;
				box-sizing: border-box;
				padding: 0 40rpx;

				.title {
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #3e3e3e;
					letter-spacing: 2rpx;
					font-weight: 600;
				}
			}

			.product-list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.product-item {
					width: 334rpx;
					margin: 20rpx 5rpx;
					background-color: #fff;
					border-radius: 20rpx;

					image {
						display: block;
						width: 100%;
						height: 240rpx;
						border-radius: 20rpx;
					}

					.text-area {
						padding: 36rpx;
						font-size: 26rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.like-name {
							width: 100%;
							text-align: center;
							font-weight: 700;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							margin-top: 15rpx;
						}

						.price,
						.origin {
							// width: 75rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
